<template>
  <vis-container
    class="level-comp"
    title="心理健康水平分布图"
    title-bg-size="665"
    border="true"
    @mouseover.native="handleMouseOver"
    @mouseout.native="handleMouseOut"
  >
    <div class="tab-wrapper">
      <VisTabs :default-active="currentTab" :data="tabs" @change="handleChange" />
    </div>
    <keep-alive>
      <component
        :is="currentComp.comp"
        :data="currentComp.data"
        :color="currentComp.color"
        :unit="unit"
        :data-zoom-end="currentComp.dataZoomEnd"
      ></component>
    </keep-alive>
  </vis-container>
</template>

<script lang="ts">
import { autoLoop } from '@/config'
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
import CommonMixins from './commonMixins'
import TimerMixins from './timerMixins'

@Component({
  name: 'LevelComp',
  mixins: [CommonMixins, TimerMixins]
})
export default class LevelComp extends Vue {
  @Prop({
    type: Array
  })
  tabs!: any[]

  @Watch('tabs', {
    deep: true
  })
  handleTabsChange(this: any) {
    this.clearTimerFn()
    this.activeIndex = 0
    this.restartTimerFn()
  }
  @Watch('activeIndex')
  handleActiveIndexChange(newVal: number) {
    this.currentTab = this.tabs[newVal].value
  }
  tabsData = [
    {
      label: '全国',
      value: 'country'
    },
    {
      label: '各省',
      value: 'province'
    },
    {
      label: '各年级',
      value: 'classes'
    },
    {
      label: '按性别',
      value: 'gender'
    }
  ]
  currentTab: string | number = 'country'
  tabsChart: { [key: string]: any } = {
    country: {
      comp: 'RingChart',
      data: {}
    },
    province: {
      comp: 'BarChart',
      data: {},
      dataZoomEnd: 30
    },
    classes: {
      comp: 'LineChart',
      data: {}
    },
    gender: {
      comp: 'LargeBarChart',
      data: {},
      color: ['#4CE1FB', '#EBAF53']
    }
  }
  unit = '%'

  get currentComp() {
    return this.tabsChart[this.currentTab]
  }

  get timerMaxLength() {
    return this.tabs.length
  }

  transformData({
    school_question_total = [],
    school_grade_question_group_school = {},
    school_grade_question = {},
    school_sex_question = {},
    school_question_total_color = {},
    school_grade_question_group_school_color = {},
    school_grade_question_color = {}
  }) {
    const { country, province, classes, gender } = this.tabsChart
    const countryData = this.transformCountryData(school_question_total)
    const provinceData = this.transformProvinceData(school_grade_question_group_school)
    const classesData = this.transformClassesData(school_grade_question)
    const genderData = this.transformGenderData(school_sex_question)

    this.tabsChart = {
      ...this.tabsChart,
      country: {
        ...country,
        data: countryData,
        color: Object.values(school_question_total_color)
      },
      province: {
        ...province,
        data: provinceData,
        color: Object.values(school_grade_question_group_school_color)
      },
      classes: {
        ...classes,
        data: classesData,
        color: Object.values(school_grade_question_color)
      },
      gender: {
        ...gender,
        data: genderData
      }
    }
  }
  transformCountryData(data = []) {
    return {
      columns: ['问题等级', '百分比'],
      rows: data.map((item: any) => ({
        问题等级: item.question,
        百分比: item.percentage
      }))
    }
  }
  transformProvinceData({ area_list = [], data = [] }) {
    const obj = data.reduce((pre: any, cur: any) => {
      const { dimension = '', list = [] } = cur
      pre[dimension] = list
      return pre
    }, {})
    const keys = Object.keys(obj)
    const rows = area_list.map((province: string, index: number) => {
      const res = keys.reduce((pre: any, cur: string) => {
        pre[cur] = obj[cur][index]
        return pre
      }, {})
      return {
        省份: province,
        ...res
      }
    })
    return {
      columns: ['省份', ...keys],
      rows
    }
  }
  transformClassesData({ grade_list = [], data = [] }) {
    const obj = data.reduce((pre: any, cur: any) => {
      const { dimension = '', list = [] } = cur
      pre[dimension] = list
      return pre
    }, {})
    const keys = Object.keys(obj)
    const rows = grade_list.map((classes: string, index: number) => {
      const res = keys.reduce((pre: any, cur: string) => {
        pre[cur] = obj[cur][index]
        return pre
      }, {})
      return {
        年级: classes,
        ...res
      }
    })
    return {
      columns: ['年级', ...keys],
      rows
    }
  }
  transformGenderData({ sex_list = [], data = [] }) {
    const rows = data.map((item: any) => {
      const { dimension = '', list = [] } = item
      const [key1, key2] = sex_list
      return {
        问题类型: dimension,
        [key1]: list[0] || 0,
        [key2]: list[1] || 0
      }
    })
    return {
      columns: ['问题类型', ...(sex_list.length ? sex_list : [''])],
      rows
    }
  }

  handleChange(this: any, val: number | string) {
    this.currentTab = val
    this.clearTimerFn()
  }

  mounted(this: any) {
    if (autoLoop) {
      this.startTimerFn()
    }
  }
}
</script>
<style lang="scss" scoped>
.level-comp {
  position: relative;

  .tab-wrapper {
    position: absolute;
    top: 24px;
    right: 0;
  }
}
</style>
